<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>方块移动</title>
        <script src="../js/vue.js"></script>
        <style>
            .box{
                width: 100px;
                height: 100px;
                background-color: palevioletred;
                transition: .3s;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="box" :style="{transform: 'translate(' + x + 'px,' + y + 'px) scale(' + s + ')' }"></div>
        </div>
        <script>
            
            Vue.createApp({
                data() {
                    return {
                        x: 0,
                        y: 0,
                        s: 1
                    };
                },
                mounted() {
                    document.addEventListener('keydown', this.move);
                },
                beforeUnmount() {
                    document.removeEventListener('keydown', this.move);
                },
                methods: {
                    move(event) {
                        let code = event.keyCode;
						//alert(code)
						//+ -
                        if (code === 37) { // 左
                            this.x -= 10;
                        } else if (code === 38) { // 上
                            this.y -= 10;
                        } else if (code === 39) { // 右
                            this.x += 10;
                        } else if (code === 40) { // 下
                            this.y += 10;
                        } else if (code === 187) { // + 键
                            this.s += 0.1;
                        } else if (code === 189) { // - 键
                            this.s -= 0.1;
                            if (this.s < 0.1) {
                                this.s = 0.1;
                            }
                        }
                    }
                }
            }).mount('#app');
        </script>
    </body>
</html>
    